<template>
  <view class="answer-detail">
    <!-- <view class="header">
      <text>健康常识小测验</text>
    </view> -->
    <view class="detail">
      <text class="title">{{ testDetail.title }}</text>
      <view class="content-view">
        <view class="content-box" :class="{ error: !testDetail.correct }">
          <view class="content">
            <text v-if="testDetail.correct" class="answer-result"
              >回答正确</text
            >
            <text v-else class="answer-result">回答错误</text>
            <view class="grade-box">
              <view class="icon-coins"></view>
              <text class="answer-grade"> +{{ testDetail.score }}</text>
            </view>
            <text class="right-answer" v-if="!testDetail.correct"
              >正确答案：{{ testDetail.correctContent }}</text
            >
            <view class="answer-explain">
              {{ testDetail.description }}
            </view>
          </view>
          <button
            v-if="isLastQuestion"
            type="purple"
            class="finish"
            @tap="handleFinish"
          >
            完成小测验
          </button>
          <button v-else type="purple" class="next" @tap="handleNext">
            下一题
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import "./index.less";
export default {
  computed: {
    testDetail() {
      console.log("testDetail: ", this.$store.state.healthyTest.testDetail);
      return this.$store.state.healthyTest.testDetail;
    },
    isLastQuestion() {
      const { testSeq, todayTests } = this.$store.state.healthyTest;
      return testSeq >= todayTests.length - 1;
    }
  },
  methods: {
    handleNext() {
      let currentTestSeq = this.$store.state.healthyTest.testSeq;
      this.$store.commit("setTestSeq", ++currentTestSeq);
      Taro.navigateTo({
        url: "/pages/health-questionnaire/knowledge-test/index"
      });
    },
    handleFinish() {
      this.$store.commit("clearHealthyTestStore");
      Taro.navigateTo({
        url: "/pages/index/index"
      });
    }
  }
};
</script>
